<!DOCTYPE html>

<html lang="zh-CN">

<head>
  
  <meta name="baidu-site-verification" content="code-J1Qg17G6wT" />
  <title>web学习笔记 - 颜色代码表 - 咔斯の小窝</title>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
  
  

    <!-- Site Verification -->
    <meta name="baidu-site-verification" content="code-7bF3wXCwO5" />

  <link rel="shortcut icon" href="https://s2.loli.net/2022/07/19/xKNvsPHqcyCL37d.png" type="image/png" />
  <meta name="description" content="记录一颜色代码表">
<meta property="og:type" content="article">
<meta property="og:title" content="web学习笔记 - 颜色代码表">
<meta property="og:url" content="https://blog.kassama.top/webNotes-ColorTable1.html">
<meta property="og:site_name" content="咔斯の小窝">
<meta property="og:description" content="记录一颜色代码表">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-03-25T09:48:30.000Z">
<meta property="article:modified_time" content="2022-07-28T12:11:03.521Z">
<meta property="article:author" content="咔斯Sama">
<meta property="article:tag" content="HTML">
<meta property="article:tag" content="web">
<meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/highlight.js@9.15.8/styles/atom-one-dark.css,gh/theme-nexmoe/hexo-theme-nexmoe@latest/source/lib/mdui_043tiny/css/mdui.css,gh/theme-nexmoe/hexo-theme-nexmoe@latest/source/lib/iconfont/iconfont.css,gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css?v=233" crossorigin>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.min.css">
  
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2421060_cksn56jaae6.css">
  
  <link rel="stylesheet" href="/css/style.css?v=1695462045757">
<meta name="generator" content="Hexo 6.1.0"></head>

<body class="mdui-drawer-body-left">
  
  <div id="nexmoe-background">
    <div class="nexmoe-bg" style="background-image: url(https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/bk1.webp)"></div>
    <div class="nexmoe-small" style="background-image: url(https://s2.loli.net/2022/07/19/QDhWb3BqyXLcdF8.png)"></div>
    <div class="mdui-appbar mdui-shadow-0">
      <div class="mdui-toolbar">
        <a mdui-drawer="{target: '#drawer', swipe: true}" title="menu" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon nexmoefont icon-menu"></i></a>
        <div class="mdui-toolbar-spacer"></div>
        <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
        <a href="/" title="咔斯Sama" class="mdui-btn mdui-btn-icon"><img src="https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/kasi.webp" alt="咔斯Sama"></a>
       </div>
    </div>
  </div>
  <div id="nexmoe-header">
      <div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/" title="咔斯Sama">
            <img src="https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/kasi.webp" alt="咔斯Sama" alt="咔斯Sama">
        </a>
    </div>
    <div class="nexmoe-count">
        <div id="ks-articlesBtn" class="nexmoe-count-item"><span>文章</span>32 <div class="item-radius"></div><div class="item-radius item-right"></div> </div>
        <div id="ks-tagsBtn" class="nexmoe-count-item"><span>标签</span>14<div class="item-radius"></div><div class="item-radius item-right"></div></div>
        <div id="ks-categoriesBtn" class="nexmoe-count-item"><span>分类</span>6<div class="item-radius"></div><div class="item-radius item-right"></div></div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/" title="回到首页">
            <i class="mdui-list-item-icon nexmoefont icon-meishi"></i>
            <div class="mdui-list-item-content">
                回到首页
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/archives.html" title="文章归档">
            <i class="mdui-list-item-icon nexmoefont icon-hanbao1"></i>
            <div class="mdui-list-item-content">
                文章归档
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/friend.html" title="我的朋友">
            <i class="mdui-list-item-icon nexmoefont icon-cola"></i>
            <div class="mdui-list-item-content">
                我的朋友
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/photos.html" title="咔斯相册">
            <i class="mdui-list-item-icon nexmoefont icon-tuchong"></i>
            <div class="mdui-list-item-content">
                咔斯相册
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/about.html" title="关于咔斯">
            <i class="mdui-list-item-icon nexmoefont icon-jiubei1"></i>
            <div class="mdui-list-item-content">
                关于咔斯
            </div>
        </a>
        
    </div>
    <aside id="nexmoe-sidebar">
  
  
<!-- 站内搜索 -->

<div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-search" >
        <form id="search-form">
            <label><input type="text" id="local-search-input" name="q" results="0" placeholder="站内搜索" class="input form-control" autocomplete="off" autocorrect="off"/></label>
            <!-- 清空/重置搜索框 -->
            <i class="fa fa-times" onclick="resetSearch()"></i>
        </form>
    </div>
    <div id="local-search-result"></div> <!-- 搜索结果区 -->
    <!-- <p class='no-result'></p> 无匹配时显示，注意在 CSS 中设置默认隐藏 -->
</div>


  
  <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-social">
        <a class="mdui-ripple" href="http://wpa.qq.com/msgrd?v=3&uin=1347993953&site=qq&menu=yes" target="_blank" mdui-tooltip="{content: 'QQ'}" style="color: rgb(64, 196, 255);background-color: rgba(64, 196, 255, .1);">
            <i class="nexmoefont icon-QQ"></i>
        </a><a class="mdui-ripple" href="https://steamcommunity.com/id/kasiwuhui/" target="_blank" mdui-tooltip="{content: 'steam'}" style="color: rgb(14, 71, 161);background-color: rgba(14, 71, 161, .15);">
            <i class="nexmoefont icon-steam"></i>
        </a><a class="mdui-ripple" href="mailto:kasiwuhui@vip.qq.com" target="_blank" mdui-tooltip="{content: 'mail'}" style="color: rgb(249,8,8);background-color: rgba(249,8,8,.1);">
            <i class="nexmoefont icon-mail-fill"></i>
        </a><a class="mdui-ripple" href="https://space.bilibili.com/93548600" target="_blank" mdui-tooltip="{content: '哔哩哔哩'}" style="color: rgb(231, 106, 141);background-color: rgba(231, 106, 141, .15);">
            <i class="nexmoefont icon-bilibili"></i>
        </a><a class="mdui-ripple" href="https://github.com/kasisama/" target="_blank" mdui-tooltip="{content: 'GitHub'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-github"></i>
        </a><a class="mdui-ripple" href="https://gitee.com/kassama" target="_blank" mdui-tooltip="{content: 'gitee'}" style="color: rgb(199, 29, 35);background-color: rgba(199, 29, 35, .15);">
            <i class="nexmoefont icon-mayun"></i>
        </a>
    </div>
</div>
  
  
  <div class="nexmoe-widget-wrap">
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/tags/CDN/" style="font-size: 10px;">CDN</a> <a href="/tags/HTML/" style="font-size: 20px;">HTML</a> <a href="/tags/Linux/" style="font-size: 12.5px;">Linux</a> <a href="/tags/NodeJs/" style="font-size: 12.5px;">NodeJs</a> <a href="/tags/QWQ/" style="font-size: 10px;">QWQ</a> <a href="/tags/Ubuntu/" style="font-size: 12.5px;">Ubuntu</a> <a href="/tags/Vue/" style="font-size: 15px;">Vue</a> <a href="/tags/web/" style="font-size: 17.5px;">web</a> <a href="/tags/wiki/" style="font-size: 12.5px;">wiki</a> <a href="/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 10px;">博客</a> <a href="/tags/%E5%92%94%E6%96%AF/" style="font-size: 10px;">咔斯</a> <a href="/tags/%E5%92%94%E6%96%AF%E5%A8%B1%E4%B9%90/" style="font-size: 10px;">咔斯娱乐</a> <a href="/tags/%E5%AE%A0%E7%89%A9%E5%85%BB%E6%88%90/" style="font-size: 12.5px;">宠物养成</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E6%9D%A1%E6%AC%BE/" style="font-size: 10px;">服务条款</a>
    </div>
    
  </div>

  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章分类</h3>
    <div class="nexmoe-widget">

      <ul class="category-list">

        


        

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/web笔记/">web笔记</a>
          <span class="category-list-count">23</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/wiki/">wiki</a>
          <span class="category-list-count">2</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/公告/">公告</a>
          <span class="category-list-count">1</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/备忘/">备忘</a>
          <span class="category-list-count">1</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/日志/">日志</a>
          <span class="category-list-count">4</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/遇坑记录/">遇坑记录</a>
          <span class="category-list-count">1</span>
        </li>

        
      </ul>

    </div>
  </div>


  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章归档</h3>
    <div class="nexmoe-widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/">2022</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/">2021</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/">2020</a><span class="archive-list-count">20</span></li></ul>
    </div>
  </div>


<style>
.nexmoe-widget .archive-list-count{
	position : absolute;
	right: 15px;
	top:9px;
	color: #DDD;
}
</style>

  
</aside>
    <div class="nexmoe-copyright">
        &copy; 2023 咔斯Sama
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://github.com/theme-nexmoe/hexo-theme-nexmoe" target="_blank">Nexmoe</a><br/>
        <a href="http://beian.miit.gov.cn" target="_blank"></a><br/>
        
        <div style="font-size: 12px">
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            本站总访问量  <a id="busuanzi_value_site_pv"></a> 次<br />
            本站访客数<a id="busuanzi_value_site_uv"></a>人次
        </div>
        
        
    </div>

</div><!-- .nexmoe-drawer -->

  </div>
  <div id="nexmoe-content">
    <div class="nexmoe-primary">
        <div class="nexmoe-post">
    
        <div class="nexmoe-post-cover"
             style="padding-bottom: 24.305555555555554%;">
            <img data-src="https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/bk1.webp" data-sizes="auto" alt="web学习笔记 - 颜色代码表" class="lazyload">
            <h1>web学习笔记 - 颜色代码表</h1>
        </div>
    

        <div class="nexmoe-post-meta nexmoe-rainbow" style="margin:10px 0!important;">
    <a><i class="nexmoefont icon-calendar-fill"></i>2020年03月25日</a>
    <a><i class="nexmoefont icon-areachart"></i>645 字</a>
    <a><i class="nexmoefont icon-time-circle-fill"></i>大概 3 分钟</a>
</div>


        <article>
            <p>记录一颜色代码表</p>
<span id="more"></span>
<article class="baidu_pl">
    <div id="article_content" class="article_content clearfix">
        <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-bbac9290cd.css">
        <div id="content_views" class="markdown_views prism-atom-one-light">
            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block"
                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                <path>
            </svg>
            <h3><a name="t0"></a><a id="HTMLCSS_0"></a>HTML及CSS常用颜色英文词汇</h3>
            <div class="table-box">
                <table>
                    <tbody>
                        <tr>
                            <td>黑色</td>
                            <td>银色</td>
                            <td>灰色</td>
                            <td>白色</td>
                            <td>茶色</td>
                            <td>红色</td>
                            <td>紫色</td>
                            <td>紫红</td>
                        </tr>
                        <tr>
                            <td> black</td>
                            <td> silver</td>
                            <td> gray</td>
                            <td> white</td>
                            <td> maroon</td>
                            <td> red</td>
                            <td> purple</td>
                            <td> fuchsia</td>
                        </tr>
                        <tr>
                            <td bgcolor="black">#000000</td>
                            <td bgcolor="silver">#C0C0C0</td>
                            <td bgcolor="gray">#808080</td>
                            <td bgcolor="white"> #FFFFFF</td>
                            <td bgcolor="maroon"> #800000</td>
                            <td bgcolor="red"> #FF0000 </td>
                            <td bgcolor="purple"> #800080</td>
                            <td bgcolor="fuchsia"> #FF00FF</td>
                        </tr>
                        <tr class="line"></tr>
                        <tr>
                            <td> 绿色</td>
                            <td> 亮绿</td>
                            <td> 橄榄</td>
                            <td> 黄色</td>
                            <td> 深蓝</td>
                            <td> 蓝色</td>
                            <td> 青色</td>
                            <td> 浅绿</td>
                        </tr>
                        <tr>
                            <td> green</td>
                            <td> lime</td>
                            <td> olive</td>
                            <td> yellow</td>
                            <td> navy</td>
                            <td> blue</td>
                            <td> teal</td>
                            <td> aqua</td>
                        </tr>
                        <tr class="color_000">
                            <td bgcolor="green">#008000</td>
                            <td bgcolor="lime">#00FF00</td>
                            <td bgcolor="olive">#808000</td>
                            <td bgcolor="yellow">#FFFF00</td>
                            <td bgcolor="navy">#000080</td>
                            <td bgcolor="blue">#0000FF</td>
                            <td bgcolor="teal">#008080</td>
                            <td bgcolor="aqua">#00FFFF</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h3><a name="t1"></a><a id="CSS_71"></a>CSS颜色代码大全</h3>
            <div class="table-box">
                <table border="0">
                    <tbody>
                        <tr>
                            <td height="30" width="95" bgcolor="#ffffff"> FFFFFF</td>
                            <td height="30" width="95" bgcolor="#dddddd"> #DDDDDD</td>
                            <td height="30" width="95" bgcolor="#aaaaaa"> #AAAAAA</td>
                            <td height="30" width="95" bgcolor="#888888"> #888888</td>
                            <td height="30" width="95" bgcolor="#666666"> #666666</td>
                            <td height="30" width="95" bgcolor="#444444"> #444444</td>
                            <td height="30" width="95" bgcolor="#000000"> #000000</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#ffb7dd"> #FFB7DD</td>
                            <td height="30" width="95" bgcolor="#ff88c2"> #FF88C2</td>
                            <td height="30" width="95" bgcolor="#ff44aa"> #FF44AA&nbsp;</td>
                            <td height="30" width="95" bgcolor="#ff0088"> #FF0088&nbsp;</td>
                            <td height="30" width="95" bgcolor="#c10066"> #C10066&nbsp;</td>
                            <td height="30" width="95" bgcolor="#a20055"> #A20055&nbsp;</td>
                            <td height="30" width="95" bgcolor="#8c0044"> #8C0044&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#ffcccc"> #FFCCCC</td>
                            <td height="30" width="95" bgcolor="#ff8888"> #FF8888</td>
                            <td height="30" width="95" bgcolor="#ff3333"> #FF3333&nbsp;</td>
                            <td height="30" width="95" bgcolor="#ff0000"> #FF0000&nbsp;</td>
                            <td height="30" width="95" bgcolor="#cc0000"> #CC0000&nbsp;</td>
                            <td height="30" width="95" bgcolor="#aa0000"> #AA0000&nbsp;</td>
                            <td height="30" width="95" bgcolor="#880000"> #880000&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#ffc8b4"> #FFC8B4</td>
                            <td height="30" width="95" bgcolor="#ffa488"> #FFA488</td>
                            <td height="30" width="95" bgcolor="#ff7744"> #FF7744&nbsp;</td>
                            <td height="30" width="95" bgcolor="#ff5511"> #FF5511&nbsp;</td>
                            <td height="30" width="95" bgcolor="#e63f00"> #E63F00&nbsp;</td>
                            <td height="30" width="95" bgcolor="#c63300"> #C63300&nbsp;</td>
                            <td height="30" width="95" bgcolor="#a42d00"> #A42D00&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#ffddaa"> #FFDDAA</td>
                            <td height="30" width="95" bgcolor="#ffbb66"> #FFBB66</td>
                            <td height="30" width="95" bgcolor="#ffaa33"> #FFAA33</td>
                            <td height="30" width="95" bgcolor="#ff8800"> #FF8800&nbsp;</td>
                            <td height="30" width="95" bgcolor="#ee7700"> #EE7700&nbsp;</td>
                            <td height="30" width="95" bgcolor="#cc6600"> #CC6600&nbsp;</td>
                            <td height="30" width="95" bgcolor="#bb5500"> #BB5500&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#ffee99"> #FFEE99</td>
                            <td height="30" width="95" bgcolor="#ffdd55"> #FFDD55</td>
                            <td height="30" width="95" bgcolor="#ffcc22"> #FFCC22</td>
                            <td height="30" width="95" bgcolor="#ffbb00"> #FFBB00&nbsp;</td>
                            <td height="30" width="95" bgcolor="#ddaa00"> #DDAA00&nbsp;</td>
                            <td height="30" width="95" bgcolor="#aa7700"> #AA7700&nbsp;</td>
                            <td height="30" width="95" bgcolor="#886600"> #886600&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#ffffbb"> #FFFFBB</td>
                            <td height="30" width="95" bgcolor="#ffff77"> #FFFF77</td>
                            <td height="30" width="95" bgcolor="#ffff33"> #FFFF33</td>
                            <td height="30" width="95" bgcolor="#ffff00"> #FFFF00</td>
                            <td height="30" width="95" bgcolor="#eeee00"> #EEEE00</td>
                            <td height="30" width="95" bgcolor="#bbbb00"> #BBBB00</td>
                            <td height="30" width="95" bgcolor="#888800"> #888800</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#eeffbb"> #EEFFBB</td>
                            <td height="30" width="95" bgcolor="#ddff77"> #DDFF77</td>
                            <td height="30" width="95" bgcolor="#ccff33"> #CCFF33</td>
                            <td height="30" width="95" bgcolor="#bbff00"> #BBFF00</td>
                            <td height="30" width="95" bgcolor="#99dd00"> #99DD00</td>
                            <td height="30" width="95" bgcolor="#88aa00"> #88AA00</td>
                            <td height="30" width="95" bgcolor="#668800"> #668800</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#ccff99"> #CCFF99</td>
                            <td height="30" width="95" bgcolor="#bbff66"> #BBFF66</td>
                            <td height="30" width="95" bgcolor="#99ff33"> #99FF33</td>
                            <td height="30" width="95" bgcolor="#77ff00"> #77FF00</td>
                            <td height="30" width="95" bgcolor="#66dd00"> #66DD00</td>
                            <td height="30" width="95" bgcolor="#55aa00"> #55AA00</td>
                            <td height="30" width="95" bgcolor="#227700"> #227700</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#99ff99"> #99FF99</td>
                            <td height="30" width="95" bgcolor="#66ff66"> #66FF66</td>
                            <td height="30" width="95" bgcolor="#33ff33"> #33FF33</td>
                            <td height="30" width="95" bgcolor="#00ff00"> #00FF00</td>
                            <td height="30" width="95" bgcolor="#00dd00"> #00DD00</td>
                            <td height="30" width="95" bgcolor="#00aa00"> #00AA00</td>
                            <td height="30" width="95" bgcolor="#008800"> #008800</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#bbffee"> #BBFFEE</td>
                            <td height="30" width="95" bgcolor="#77ffcc"> #77FFCC</td>
                            <td height="30" width="95" bgcolor="#33ffaa"> #33FFAA</td>
                            <td height="30" width="95" bgcolor="#00ff99"> #00FF99</td>
                            <td height="30" width="95" bgcolor="#00dd77"> #00DD77</td>
                            <td height="30" width="95" bgcolor="#00aa55"> #00AA55</td>
                            <td height="30" width="95" bgcolor="#008844"> #008844</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#aaffee"> #AAFFEE</td>
                            <td height="30" width="95" bgcolor="#77ffee"> #77FFEE</td>
                            <td height="30" width="95" bgcolor="#33ffdd"> #33FFDD</td>
                            <td height="30" width="95" bgcolor="#00ffcc"> #00FFCC</td>
                            <td height="30" width="95" bgcolor="#00ddaa"> #00DDAA</td>
                            <td height="30" width="95" bgcolor="#00aa88"> #00AA88</td>
                            <td height="30" width="95" bgcolor="#008866"> #008866</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#99ffff"> #99FFFF</td>
                            <td height="30" width="95" bgcolor="#66ffff"> #66FFFF</td>
                            <td height="30" width="95" bgcolor="#33ffff"> #33FFFF</td>
                            <td height="30" width="95" bgcolor="#00ffff"> #00FFFF</td>
                            <td height="30" width="95" bgcolor="#00dddd"> #00DDDD</td>
                            <td height="30" width="95" bgcolor="#00aaaa"> #00AAAA</td>
                            <td height="30" width="95" bgcolor="#008888"> #008888</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#cceeff"> #CCEEFF</td>
                            <td height="30" width="95" bgcolor="#77ddff"> #77DDFF</td>
                            <td height="30" width="95" bgcolor="#33ccff"> #33CCFF</td>
                            <td height="30" width="95" bgcolor="#00bbff"> #00BBFF</td>
                            <td height="30" width="95" bgcolor="#009fcc"> #009FCC</td>
                            <td height="30" width="95" bgcolor="#0088a8"> #0088A8</td>
                            <td height="30" width="95" bgcolor="#007799"> #007799</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#ccddff"> #CCDDFF</td>
                            <td height="30" width="95" bgcolor="#99bbff"> #99BBFF</td>
                            <td height="30" width="95" bgcolor="#5599ff"> #5599FF</td>
                            <td height="30" width="95" bgcolor="#0066ff"> #0066FF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#0044bb"> #0044BB&nbsp;</td>
                            <td height="30" width="95" bgcolor="#003c9d"> #003C9D&nbsp;</td>
                            <td height="30" width="95" bgcolor="#003377"> #003377&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#ccccff"> #CCCCFF</td>
                            <td height="30" width="95" bgcolor="#9999ff"> #9999FF</td>
                            <td height="30" width="95" bgcolor="#5555ff"> #5555FF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#0000ff"> #0000FF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#0000cc"> #0000CC&nbsp;</td>
                            <td height="30" width="95" bgcolor="#0000aa"> #0000AA&nbsp;</td>
                            <td height="30" width="95" bgcolor="#000088"> #000088&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#ccbbff"> #CCBBFF</td>
                            <td height="30" width="95" bgcolor="#9f88ff"> #9F88FF</td>
                            <td height="30" width="95" bgcolor="#7744ff"> #7744FF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#5500ff"> #5500FF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#4400cc"> #4400CC&nbsp;</td>
                            <td height="30" width="95" bgcolor="#2200aa"> #2200AA&nbsp;</td>
                            <td height="30" width="95" bgcolor="#220088"> #220088&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#d1bbff"> #D1BBFF</td>
                            <td height="30" width="95" bgcolor="#b088ff"> #B088FF</td>
                            <td height="30" width="95" bgcolor="#9955ff"> #9955FF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#7700ff"> #7700FF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#5500dd"> #5500DD&nbsp;</td>
                            <td height="30" width="95" bgcolor="#4400b3"> #4400B3&nbsp;</td>
                            <td height="30" width="95" bgcolor="#3a0088"> #3A0088&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#e8ccff"> #E8CCFF</td>
                            <td height="30" width="95" bgcolor="#d28eff"> #D28EFF</td>
                            <td height="30" width="95" bgcolor="#b94fff"> #B94FFF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#9900ff"> #9900FF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#7700bb"> #7700BB&nbsp;</td>
                            <td height="30" width="95" bgcolor="#66009d"> #66009D&nbsp;</td>
                            <td height="30" width="95" bgcolor="#550088"> #550088&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#f0bbff"> #F0BBFF</td>
                            <td height="30" width="95" bgcolor="#e377ff"> #E38EFF</td>
                            <td height="30" width="95" bgcolor="#d93eff"> #E93EFF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#cc00ff"> #CC00FF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#a500cc"> #A500CC&nbsp;</td>
                            <td height="30" width="95" bgcolor="#7a0099"> #7A0099&nbsp;</td>
                            <td height="30" width="95" bgcolor="#660077"> #660077&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="30" width="95" bgcolor="#ffb3ff"> #FFB3FF</td>
                            <td height="30" width="95" bgcolor="#ff77ff"> #FF77FF</td>
                            <td height="30" width="95" bgcolor="#ff3eff"> #FF3EFF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#ff00ff"> #FF0&nbsp;0FF&nbsp;</td>
                            <td height="30" width="95" bgcolor="#cc00cc"> #CC00CC&nbsp;</td>
                            <td height="30" width="95" bgcolor="#990099"> #990099&nbsp;</td>
                            <td height="30" width="95" bgcolor="#770077"> #770077&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h3><a name="t2"></a><a id="_414"></a>红色</h3>
            <div class="table-box">
                <table border="0">
                    <tbody>
                        <tr>
                            <th width="130">颜色名称</th>
                            <th width="80">代码</th>
                            <th width="80">颜色</th>
                        </tr>
                        <tr>
                            <td>maroon</td>
                            <td>#800000</td>
                            <td bgcolor="#800000"></td>
                        </tr>
                        <tr>
                            <td>darkred</td>
                            <td>#8B0000</td>
                            <td bgcolor="#8b0000"></td>
                        </tr>
                        <tr>
                            <td>brown</td>
                            <td>#A52A2A</td>
                            <td bgcolor="#a52a2a"></td>
                        </tr>
                        <tr>
                            <td>firebrick</td>
                            <td>#B22222</td>
                            <td bgcolor="#b22222"></td>
                        </tr>
                        <tr>
                            <td>crimson</td>
                            <td>#DC143C</td>
                            <td bgcolor="#dc143c"> </td>
                        </tr>
                        <tr>
                            <td>red</td>
                            <td>#FF0000</td>
                            <td bgcolor="#ff0000"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h3><a name="t3"></a><a id="___456"></a>桃红 ~ 粉红</h3>
            <div class="table-box">
                <table border="0">
                    <tbody>
                        <tr>
                            <th width="130">颜色名称</th>
                            <th width="80">代码</th>
                            <th width="80">颜色</th>
                        </tr>
                        <tr>
                            <td>mediumvioletred</td>
                            <td>#C71585</td>
                            <td bgcolor="#c71585"></td>
                        </tr>
                        <tr>
                            <td>palevioletred</td>
                            <td>#D87093</td>
                            <td bgcolor="#d87093"></td>
                        </tr>
                        <tr>
                            <td>deeppink</td>
                            <td>#FF1493</td>
                            <td bgcolor="#ff1493"></td>
                        </tr>
                        <tr>
                            <td>fuchsia(magenta) </td>
                            <td>#FF00FF</td>
                            <td bgcolor="#ff00ff"></td>
                        </tr>
                        <tr>
                            <td>hotpink</td>
                            <td>#FF69B4</td>
                            <td bgcolor="#ff69b4"></td>
                        </tr>
                        <tr>
                            <td>pink</td>
                            <td>#FFC0CB</td>
                            <td bgcolor="#ffc0cb"></td>
                        </tr>
                        <tr>
                            <td>lightpink</td>
                            <td>#FFB6C1</td>
                            <td bgcolor="#ffb6c1"></td>
                        </tr>
                        <tr>
                            <td>mistyrose</td>
                            <td>#FFE4E1</td>
                            <td bgcolor="#ffe4e1"></td>
                        </tr>
                        <tr>
                            <td>lavenderblush</td>
                            <td>#FFF0F5</td>
                            <td bgcolor="#fff0f5"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h3><a name="t4"></a><a id="_513"></a>紫色</h3>
            <div class="table-box">
                <table border="0">
                    <tbody>
                        <tr>
                            <th width="130">颜色名称</th>
                            <th width="80">代码</th>
                            <th width="80">颜色</th>
                        </tr>
                        <tr>
                            <td>indigo</td>
                            <td>#4B0082</td>
                            <td bgcolor="#4b0082"></td>
                        </tr>
                        <tr>
                            <td>purple</td>
                            <td>#800080</td>
                            <td bgcolor="#800080"></td>
                        </tr>
                        <tr>
                            <td>darkmagenta</td>
                            <td>#8B008B</td>
                            <td bgcolor="#8b008b"></td>
                        </tr>
                        <tr>
                            <td>darkorchid</td>
                            <td>#9932CC</td>
                            <td bgcolor="#9932cc"></td>
                        </tr>
                        <tr>
                            <td>blueviolet</td>
                            <td>#8A2BE2</td>
                            <td bgcolor="#8a2be2"></td>
                        </tr>
                        <tr>
                            <td>darkviolet</td>
                            <td>#9400D3</td>
                            <td bgcolor="#9400d3"></td>
                        </tr>
                        <tr>
                            <td>slateblue</td>
                            <td>#6A5ACD</td>
                            <td bgcolor="#6a5acd"></td>
                        </tr>
                        <tr>
                            <td>mediumpurple</td>
                            <td>#9370DB</td>
                            <td bgcolor="#9370db"></td>
                        </tr>
                        <tr>
                            <td>mediumslateblue</td>
                            <td>#7B68EE</td>
                            <td bgcolor="#7b68ee"></td>
                        </tr>
                        <tr>
                            <td>mediumorchid</td>
                            <td>#BA55D3</td>
                            <td bgcolor="#ba55d3"></td>
                        </tr>
                        <tr>
                            <td>violet</td>
                            <td>#EE82EE</td>
                            <td bgcolor="#ee82ee"></td>
                        </tr>
                        <tr>
                            <td>plum</td>
                            <td>#DDA0DD</td>
                            <td bgcolor="#dda0dd"></td>
                        </tr>
                        <tr>
                            <td>thistle</td>
                            <td>#D8BFD8</td>
                            <td bgcolor="#d8bfd8"></td>
                        </tr>
                        <tr>
                            <td>lavender</td>
                            <td>#E6E6FA</td>
                            <td bgcolor="#e6e6fa"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h3><a name="t5"></a><a id="_____595"></a>褐 ~ 橘 ~ 米白</h3>
            <div class="table-box">
                <table border="0">
                    <tbody>
                        <tr>
                            <th width="130">颜色名称</th>
                            <th width="80">代码</th>
                            <th width="80">颜色</th>
                        </tr>
                        <tr>
                            <td>saddlebrown</td>
                            <td>#8B4513</td>
                            <td bgcolor="#8b4513"></td>
                        </tr>
                        <tr>
                            <td>sienna</td>
                            <td>#A0522D</td>
                            <td bgcolor="#a0522d"></td>
                        </tr>
                        <tr>
                            <td>chocolate</td>
                            <td>#D2691E</td>
                            <td bgcolor="#d2691e"></td>
                        </tr>
                        <tr>
                            <td>indianred</td>
                            <td>#CD5C5C</td>
                            <td bgcolor="#cd5c5c"></td>
                        </tr>
                        <tr>
                            <td>rosybrown</td>
                            <td>#BC8F8F</td>
                            <td bgcolor="#bc8f8f"></td>
                        </tr>
                        <tr>
                            <td>lightcorol</td>
                            <td>#F08080</td>
                            <td bgcolor="#f08080"></td>
                        </tr>
                        <tr>
                            <td>salmon</td>
                            <td>#FA8072</td>
                            <td bgcolor="#fa8072"></td>
                        </tr>
                        <tr>
                            <td>lightsalmon</td>
                            <td>#FFA07A</td>
                            <td bgcolor="#ffa07a"></td>
                        </tr>
                        <tr>
                            <td>orangered</td>
                            <td>#FF4500</td>
                            <td bgcolor="#ff4500"></td>
                        </tr>
                        <tr>
                            <td>tomato</td>
                            <td>#FF6347</td>
                            <td bgcolor="#ff6347"></td>
                        </tr>
                        <tr>
                            <td>coral</td>
                            <td>#FF7F50</td>
                            <td bgcolor="#ff7f50"></td>
                        </tr>
                        <tr>
                            <td>darkorange</td>
                            <td>#FF8C00</td>
                            <td bgcolor="#ff8c00"></td>
                        </tr>
                        <tr>
                            <td>sandybrown</td>
                            <td>#F4A460</td>
                            <td bgcolor="#f4a460"></td>
                        </tr>
                        <tr>
                            <td>peru</td>
                            <td>#CD853F</td>
                            <td bgcolor="#cd853f"></td>
                        </tr>
                        <tr>
                            <td>tan</td>
                            <td>#D2B48C</td>
                            <td bgcolor="#d2b48c"></td>
                        </tr>
                        <tr>
                            <td>burlywood</td>
                            <td>#DEB887</td>
                            <td bgcolor="#deb887"></td>
                        </tr>
                        <tr>
                            <td>wheat</td>
                            <td>#F5DEB3</td>
                            <td bgcolor="#f5deb3"></td>
                        </tr>
                        <tr>
                            <td>moccasin</td>
                            <td>#FFE4B5</td>
                            <td bgcolor="#ffe4b5"></td>
                        </tr>
                        <tr>
                            <td>navajowhite</td>
                            <td>#FFDEAD</td>
                            <td bgcolor="#ffdead"></td>
                        </tr>
                        <tr>
                            <td>peachpuff</td>
                            <td>#FFDAB9</td>
                            <td bgcolor="#ffdab9"></td>
                        </tr>
                        <tr>
                            <td>bisque</td>
                            <td>#FFE4C4</td>
                            <td bgcolor="#ffe4c4"></td>
                        </tr>
                        <tr>
                            <td>antuquewhite</td>
                            <td>#FAEBD7</td>
                            <td bgcolor="#faebd7"></td>
                        </tr>
                        <tr>
                            <td>papayawhip</td>
                            <td>#FFEFD5</td>
                            <td bgcolor="#ffefd5"></td>
                        </tr>
                        <tr>
                            <td>cornsilk</td>
                            <td>#FFF8DC</td>
                            <td bgcolor="#fff8dc"></td>
                        </tr>
                        <tr>
                            <td>oldlace</td>
                            <td>#FDF5E6</td>
                            <td bgcolor="#fdf5e6"></td>
                        </tr>
                        <tr>
                            <td>linen</td>
                            <td>#FAF0E6</td>
                            <td bgcolor="#faf0e6"></td>
                        </tr>
                        <tr>
                            <td>seashell</td>
                            <td>#FFF5EE</td>
                            <td bgcolor="#fff5ee"></td>
                        </tr>
                        <tr>
                            <td>snow</td>
                            <td>#FFFAFA</td>
                            <td bgcolor="#fffafa"></td>
                        </tr>
                        <tr>
                            <td>floralwhite</td>
                            <td>#FFFAF0</td>
                            <td bgcolor="#fffaf0"></td>
                        </tr>
                        <tr>
                            <td>ivory</td>
                            <td>#FFFFF0</td>
                            <td bgcolor="#fffff0"></td>
                        </tr>
                        <tr>
                            <td>mintcream</td>
                            <td>#F5FFFA</td>
                            <td bgcolor="#f5fffa"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h3><a name="t6"></a><a id="___761"></a>金 ~ 黄</h3>
            <div class="table-box">
                <table border="0">
                    <tbody>
                        <tr>
                            <th width="130">颜色名称</th>
                            <th width="80">代码</th>
                            <th width="80">颜色</th>
                        </tr>
                        <tr>
                            <td>darkgoldenrod</td>
                            <td>#B8860B</td>
                            <td bgcolor="#b8860b"></td>
                        </tr>
                        <tr>
                            <td>goldenrod</td>
                            <td>#DAA520</td>
                            <td bgcolor="#daa520"></td>
                        </tr>
                        <tr>
                            <td>gold</td>
                            <td>#FFD700</td>
                            <td bgcolor="#ffd700"></td>
                        </tr>
                        <tr>
                            <td>yellow</td>
                            <td>#FFFF00</td>
                            <td bgcolor="#ffff00"></td>
                        </tr>
                        <tr>
                            <td>darkkhaki</td>
                            <td>#BDB76B</td>
                            <td bgcolor="#bdb76b"></td>
                        </tr>
                        <tr>
                            <td>khaki</td>
                            <td>#F0E68C</td>
                            <td bgcolor="#f0e68c"></td>
                        </tr>
                        <tr>
                            <td>palegoldenrod</td>
                            <td>#EEE8AA</td>
                            <td bgcolor="#eee8aa"></td>
                        </tr>
                        <tr>
                            <td>beige</td>
                            <td>#F5F5DC</td>
                            <td bgcolor="#f5f5dc"></td>
                        </tr>
                        <tr>
                            <td>lemonchiffon</td>
                            <td>#FFFACD</td>
                            <td bgcolor="#fffacd"></td>
                        </tr>
                        <tr>
                            <td> lightgoldenrodyellow</td>
                            <td>#FAFAD2</td>
                            <td bgcolor="#fafad2"></td>
                        </tr>
                        <tr>
                            <td>lightyellow</td>
                            <td>#FFFFE0</td>
                            <td bgcolor="#ffffe0"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h3><a name="t7"></a><a id="_829"></a>绿色</h3>
            <div class="table-box">
                <table border="0">
                    <tbody>
                        <tr>
                            <th width="130">颜色名称</th>
                            <th width="80">代码</th>
                            <th width="80">颜色</th>
                        </tr>
                        <tr>
                            <td>darkslategray</td>
                            <td>#2F4F4F</td>
                            <td bgcolor="#2f4f4f"></td>
                        </tr>
                        <tr>
                            <td>darkolivegreen</td>
                            <td>#556B2F</td>
                            <td bgcolor="#556b2f"></td>
                        </tr>
                        <tr>
                            <td>olive</td>
                            <td>#808000</td>
                            <td bgcolor="#808000"></td>
                        </tr>
                        <tr>
                            <td>darkgreen</td>
                            <td>#006400</td>
                            <td bgcolor="#006400"></td>
                        </tr>
                        <tr>
                            <td>forestgreen</td>
                            <td>#228B22</td>
                            <td bgcolor="#228b22"></td>
                        </tr>
                        <tr>
                            <td>seagreen</td>
                            <td>#2E8B57</td>
                            <td bgcolor="#2e8b57"></td>
                        </tr>
                        <tr>
                            <td>green(teal)</td>
                            <td>#008080</td>
                            <td bgcolor="#008080"></td>
                        </tr>
                        <tr>
                            <td>lightseagreen</td>
                            <td>#20B2AA</td>
                            <td bgcolor="#20b2aa"></td>
                        </tr>
                        <tr>
                            <td>madiumaquamarine</td>
                            <td>#66CDAA</td>
                            <td bgcolor="#66cdaa"></td>
                        </tr>
                        <tr>
                            <td>mediumseagreen</td>
                            <td>#3CB371</td>
                            <td bgcolor="#3cb371"></td>
                        </tr>
                        <tr>
                            <td>darkseagreen</td>
                            <td>#8FBC8F</td>
                            <td bgcolor="#8fbc8f"></td>
                        </tr>
                        <tr>
                            <td>yellowgreen</td>
                            <td>#9ACD32</td>
                            <td bgcolor="#9acd32"></td>
                        </tr>
                        <tr>
                            <td>limegreen</td>
                            <td>#32CD32</td>
                            <td bgcolor="#32cd32"></td>
                        </tr>
                        <tr>
                            <td>lime</td>
                            <td>#00FF00</td>
                            <td bgcolor="#00ff00"></td>
                        </tr>
                        <tr>
                            <td>chartreuse</td>
                            <td>#7FFF00</td>
                            <td bgcolor="#7fff00"></td>
                        </tr>
                        <tr>
                            <td>lawngreen</td>
                            <td>#7CFC00</td>
                            <td bgcolor="#7cfc00"></td>
                        </tr>
                        <tr>
                            <td>greenyellow</td>
                            <td>#ADFF2F</td>
                            <td bgcolor="#adff2f"></td>
                        </tr>
                        <tr>
                            <td>mediumspringgreen</td>
                            <td>#00FA9A</td>
                            <td bgcolor="#00fa9a"></td>
                        </tr>
                        <tr>
                            <td>springgreen</td>
                            <td>#00FF7F</td>
                            <td bgcolor="#00ff7f"></td>
                        </tr>
                        <tr>
                            <td>lightgreen</td>
                            <td>#90EE90</td>
                            <td bgcolor="#90ee90"></td>
                        </tr>
                        <tr>
                            <td>palegreen</td>
                            <td>#98F898</td>
                            <td bgcolor="#98f898"></td>
                        </tr>
                        <tr>
                            <td>aquamarine</td>
                            <td>#7FFFD4</td>
                            <td bgcolor="#7fffd4"></td>
                        </tr>
                        <tr>
                            <td>honeydew</td>
                            <td>#F0FFF0</td>
                            <td bgcolor="#f0fff0"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h3><a name="t8"></a><a id="_956"></a>蓝色</h3>
            <div class="table-box">
                <table border="0">
                    <tbody>
                        <tr>
                            <th width="130">颜色名称</th>
                            <th width="80">代码</th>
                            <th width="80">颜色</th>
                        </tr>
                        <tr>
                            <td>midnightblue</td>
                            <td>#191970</td>
                            <td bgcolor="#191970"></td>
                        </tr>
                        <tr>
                            <td>navy</td>
                            <td>#000080</td>
                            <td bgcolor="#000080"></td>
                        </tr>
                        <tr>
                            <td>darkblue</td>
                            <td>#00008B</td>
                            <td bgcolor="#00008b"></td>
                        </tr>
                        <tr>
                            <td>darkslateblue</td>
                            <td>#483D8B</td>
                            <td bgcolor="#483d8b"></td>
                        </tr>
                        <tr>
                            <td>mediumblue</td>
                            <td>#0000CD</td>
                            <td bgcolor="#0000cd"></td>
                        </tr>
                        <tr>
                            <td>royalblue</td>
                            <td>#4169E1</td>
                            <td bgcolor="#4169e1"></td>
                        </tr>
                        <tr>
                            <td>dodgerblue</td>
                            <td>#1E90FF</td>
                            <td bgcolor="#1e90ff"></td>
                        </tr>
                        <tr>
                            <td>cornflowerblue</td>
                            <td>#6495ED</td>
                            <td bgcolor="#6495ed"></td>
                        </tr>
                        <tr>
                            <td>deepskyblue</td>
                            <td>#00BFFF</td>
                            <td bgcolor="#00bfff"></td>
                        </tr>
                        <tr>
                            <td>lightskyblue</td>
                            <td>#87CEFA</td>
                            <td bgcolor="#87cefa"></td>
                        </tr>
                        <tr>
                            <td>lightsteelblue</td>
                            <td>#B0C4DE</td>
                            <td bgcolor="#b0c4de"></td>
                        </tr>
                        <tr>
                            <td>lightblue</td>
                            <td>#ADD8E6</td>
                            <td bgcolor="#add8e6"></td>
                        </tr>
                        <tr>
                            <td>steelblue</td>
                            <td>#4682B4</td>
                            <td bgcolor="#4682b4"></td>
                        </tr>
                        <tr>
                            <td>darkcyan</td>
                            <td>#008B8B</td>
                            <td bgcolor="#008b8b"></td>
                        </tr>
                        <tr>
                            <td>cadetblue</td>
                            <td>#5F9EA0</td>
                            <td bgcolor="#5f9ea0"></td>
                        </tr>
                        <tr>
                            <td>darkturquoise</td>
                            <td>#00CED1</td>
                            <td bgcolor="#00ced1"></td>
                        </tr>
                        <tr>
                            <td>mediumturquoise</td>
                            <td>#48D1CC</td>
                            <td bgcolor="#48d1cc"></td>
                        </tr>
                        <tr>
                            <td>turquoise</td>
                            <td>#40E0D0</td>
                            <td bgcolor="#40e0d0"></td>
                        </tr>
                        <tr>
                            <td>skyblue</td>
                            <td>#87CECB</td>
                            <td bgcolor="#87cecb"></td>
                        </tr>
                        <tr>
                            <td>powderblue</td>
                            <td>#B0E0E6</td>
                            <td bgcolor="#b0e0e6"></td>
                        </tr>
                        <tr>
                            <td>paleturquoise</td>
                            <td>#AFEEEE</td>
                            <td bgcolor="#afeeee"></td>
                        </tr>
                        <tr>
                            <td>lightcyan</td>
                            <td>#E0FFFF</td>
                            <td bgcolor="#e0ffff"></td>
                        </tr>
                        <tr>
                            <td>azure</td>
                            <td>#F0FFFF</td>
                            <td bgcolor="#f0ffff"></td>
                        </tr>
                        <tr>
                            <td>aliceblue</td>
                            <td>#F0F8FF</td>
                            <td bgcolor="#f0f8ff"></td>
                        </tr>
                        <tr>
                            <td>aqua(cyan)</td>
                            <td>#00FFFF</td>
                            <td bgcolor="#00ffff"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h3><a name="t9"></a><a id="_____1093"></a>黑 ~ 灰 ~ 白</h3>
            <div class="table-box">
                <table border="0">
                    <tbody>
                        <tr>
                            <th width="130">颜色名称</th>
                            <th width="80">代码</th>
                            <th width="80">颜色</th>
                        </tr>
                        <tr>
                            <td>black</td>
                            <td>#000000</td>
                            <td bgcolor="#000000"></td>
                        </tr>
                        <tr>
                            <td>dimgray</td>
                            <td>#696969</td>
                            <td bgcolor="#696969"></td>
                        </tr>
                        <tr>
                            <td>gray</td>
                            <td>#808080</td>
                            <td bgcolor="#808080"></td>
                        </tr>
                        <tr>
                            <td>slategray</td>
                            <td>#708090</td>
                            <td bgcolor="#708090"></td>
                        </tr>
                        <tr>
                            <td>lightslategray</td>
                            <td>#778899</td>
                            <td bgcolor="#778899"></td>
                        </tr>
                        <tr>
                            <td>dakgray</td>
                            <td>#A9A9A9</td>
                            <td bgcolor="#a9a9a9"></td>
                        </tr>
                        <tr>
                            <td>silver</td>
                            <td>#C0C0C0</td>
                            <td bgcolor="#c0c0c0"></td>
                        </tr>
                        <tr>
                            <td>lightgray</td>
                            <td>#D3D3D3</td>
                            <td bgcolor="#d3d3d3"></td>
                        </tr>
                        <tr>
                            <td>gainsboro</td>
                            <td>#DCDCDC</td>
                            <td bgcolor="#dcdcdc"></td>
                        </tr>
                        <tr>
                            <td>whitesmoke</td>
                            <td>#F5F5F5</td>
                            <td bgcolor="#f5f5f5"></td>
                        </tr>
                        <tr>
                            <td>ghostwhite</td>
                            <td>#F8F8FF</td>
                            <td bgcolor="#f8f8ff"></td>
                        </tr>
                        <tr>
                            <td>white</td>
                            <td>#FFFFFF</td>
                            <td bgcolor="#FFFFFF"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            <div></div>
        </div>
        <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-3fd7f7a902.css"
            rel="stylesheet">
        <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-e28e519d6a.css" rel="stylesheet">
    </div>
</article>
        </article>

        
            
  <div class="nexmoe-post-copyright">
    <strong>本文作者：</strong>咔斯Sama<br>
    
    <strong>本文链接：</strong><a href="https://blog.kassama.top/webNotes-ColorTable1.html" title="https:&#x2F;&#x2F;blog.kassama.top&#x2F;webNotes-ColorTable1.html" target="_blank" rel="noopener">https:&#x2F;&#x2F;blog.kassama.top&#x2F;webNotes-ColorTable1.html</a><br>

    
      <strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可
    
  </div>


        

        <div class="nexmoe-post-meta nexmoe-rainbow">
    
        <a class="nexmoefont icon-appstore-fill -link" href="/categories/web%E7%AC%94%E8%AE%B0/">web笔记</a>
    
    
        <a class="nexmoefont icon-tag-fill -none-link" href="/tags/HTML/" rel="tag">HTML</a> <a class="nexmoefont icon-tag-fill -none-link" href="/tags/web/" rel="tag">web</a>
    
</div>

    <div class="nexmoe-post-footer">
        <section class="nexmoe-comment">
    <!-- <div class="valine ks-valine-box"></div> -->
<script src='https://lib.baomitu.com/valine/1.5.1/Valine.min.js'></script>
<script>
    // 使用方法 https://valine.js.org/quickstart.html
    new Valine({
        el: '.valine',
        appId: '6Om9oV6sycmCPkRcrF9VR7Vd-gzGzoHsz',
        appKey: 'cas3l5T4L8EkjrOFGsfzD8vM',
        enableQQ: true,
        placeholder: '阁下要说点什么嘛！',
        requiredFields:['nick','mail'],

        emojiCDN: '//cdn.bilicdn.tk/gh/kasisama/ValineCDN@master/',
        // 表情title和图片映射
        emojiMaps: {
            "bilibilitv2": "bilibilitv/[tv_doge].png",
            "bilibilitv3": "bilibilitv/[tv_亲亲].png",
            "bilibilitv4": "bilibilitv/[tv_偷笑].png",
            "bilibilitv5": "bilibilitv/[tv_再见].png",
            "bilibilitv6": "bilibilitv/[tv_冷漠].png",
            "bilibilitv7": "bilibilitv/[tv_发怒].png",
            "bilibilitv8": "bilibilitv/[tv_发财].png",
            "bilibilitv9": "bilibilitv/[tv_可爱].png",
            "bilibilitv10": "bilibilitv/[tv_吐血].png",
            "bilibilitv11": "bilibilitv/[tv_呆].png",
            "bilibilitv12": "bilibilitv/[tv_呕吐].png",
            "bilibilitv13": "bilibilitv/[tv_困].png",
            "bilibilitv14": "bilibilitv/[tv_坏笑].png",
            "bilibilitv15": "bilibilitv/[tv_大佬].png",
            "bilibilitv16": "bilibilitv/[tv_大哭].png",
            "bilibilitv17": "bilibilitv/[tv_委屈].png",
            "bilibilitv18": "bilibilitv/[tv_害羞].png",
            "bilibilitv19": "bilibilitv/[tv_尴尬].png",
            "bilibilitv20": "bilibilitv/[tv_微笑].png",
            "bilibilitv21": "bilibilitv/[tv_思考].png",
            "bilibilitv22": "bilibilitv/[tv_惊吓].png",
            "bilibilitv23": "bilibilitv/[tv_打脸].png",
            "bilibilitv24": "bilibilitv/[tv_抓狂].png",
            "bilibilitv25": "bilibilitv/[tv_抠鼻].png",
            "bilibilitv26": "bilibilitv/[tv_斜眼笑].png",
            "bilibilitv27": "bilibilitv/[tv_无奈].png",
            "bilibilitv28": "bilibilitv/[tv_晕].png",
            "bilibilitv29": "bilibilitv/[tv_流汗].png",
            "bilibilitv30": "bilibilitv/[tv_流泪].png",
            "bilibilitv31": "bilibilitv/[tv_流鼻血].png",
            "bilibilitv32": "bilibilitv/[tv_点赞].png",
            "bilibilitv33": "bilibilitv/[tv_生气].png",
            "bilibilitv34": "bilibilitv/[tv_生病].png",
            "bilibilitv35": "bilibilitv/[tv_疑问].png",
            "bilibilitv36": "bilibilitv/[tv_白眼].png",
            "bilibilitv37": "bilibilitv/[tv_皱眉].png",
            "bilibilitv38": "bilibilitv/[tv_目瞪口呆].png",
            "bilibilitv39": "bilibilitv/[tv_睡着].png",
            "bilibilitv40": "bilibilitv/[tv_笑哭].png",
            "bilibilitv41": "bilibilitv/[tv_腼腆].png",
            "bilibilitv42": "bilibilitv/[tv_色].png",
            "bilibilitv43": "bilibilitv/[tv_调侃].png",
            "bilibilitv44": "bilibilitv/[tv_调皮].png",
            "bilibilitv45": "bilibilitv/[tv_鄙视].png",
            "bilibilitv46": "bilibilitv/[tv_闭嘴].png",
            "bilibilitv47": "bilibilitv/[tv_难过].png",
            "bilibilitv48": "bilibilitv/[tv_馋].png",
            "bilibilitv49": "bilibilitv/[tv_鬼脸].png",
            "bilibilitv50": "bilibilitv/[tv_黑人问号].png",
            "bilibilitv51": "bilibilitv/[tv_鼓掌].png",
            "Heybox1": "Heybox/expression_cube.png",
            "Heybox2": "Heybox/expression_cube_bingbujiandan.png",
            "Heybox3": "Heybox/expression_cube_bizui.png",
            "Heybox4": "Heybox/expression_cube_cangsang.png",
            "Heybox5": "Heybox/expression_cube_dalian.png",
            "Heybox6": "Heybox/expression_cube_doge.png",
            "Heybox7": "Heybox/expression_cube_gandong.png",
            "Heybox8": "Heybox/expression_cube_guai.png",
            "Heybox9": "Heybox/expression_cube_gugu.png",
            "Heybox10": "Heybox/expression_cube_han.png",
            "Heybox11": "Heybox/expression_cube_hbi.png",
            "Heybox12": "Heybox/expression_cube_heirenwenhao.png",
            "Heybox13": "Heybox/expression_cube_huaji.png",
            "Heybox14": "Heybox/expression_cube_jiayou.png",
            "Heybox15": "Heybox/expression_cube_jingya.png",
            "Heybox16": "Heybox/expression_cube_kaixin.png",
            "Heybox17": "Heybox/expression_cube_ku.png",
            "Heybox18": "Heybox/expression_cube_kun.png",
            "Heybox19": "Heybox/expression_cube_kuqi.png",
            "Heybox20": "Heybox/expression_cube_nu.png",
            "Heybox21": "Heybox/expression_cube_penshui.png",
            "Heybox22": "Heybox/expression_cube_qiliang.png",
            "Heybox23": "Heybox/expression_cube_shengqi.png",
            "Heybox24": "Heybox/expression_cube_shuijiao.png",
            "Heybox25": "Heybox/expression_cube_tanqi.png",
            "Heybox26": "Heybox/expression_cube_tanshou.png",
            "Heybox27": "Heybox/expression_cube_tu.png",
            "Heybox28": "Heybox/expression_cube_wa.png",
            "Heybox29": "Heybox/expression_cube_weiqu.png",
            "Heybox30": "Heybox/expression_cube_weixiao.png",
            "Heybox31": "Heybox/expression_cube_wulianku.png",
            "Heybox32": "Heybox/expression_cube_xia.png",
            "Heybox33": "Heybox/expression_cube_xiaocry.png",
            "Heybox34": "Heybox/expression_cube_xihuan.png",
            "Heybox35": "Heybox/expression_cube_xuexi.png",
            "Heybox36": "Heybox/expression_cube_yun.png",
            "Heybox37": "Heybox/expression_cube_zan.png"
        }
    })
    
</script>
</section>
    </div>
</div>


        <div class="nexmoe-post-right">
            <div class="nexmoe-fixed">
              <div class="nexmoe-tool">
                
                
                    
                        <button class="mdui-fab catalog" style="overflow:unset;">
                            <i class="nexmoefont icon-i-catalog"></i>
                            <div class="nexmoe-toc">
                              <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#content_views"><span class="toc-number">1.</span> <span class="toc-text">HTML及CSS常用颜色英文词汇</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#content_views"><span class="toc-number">2.</span> <span class="toc-text">CSS颜色代码大全</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#content_views"><span class="toc-number">3.</span> <span class="toc-text">红色</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#content_views"><span class="toc-number">4.</span> <span class="toc-text">桃红 ~ 粉红</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#content_views"><span class="toc-number">5.</span> <span class="toc-text">紫色</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#content_views"><span class="toc-number">6.</span> <span class="toc-text">褐 ~ 橘 ~ 米白</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#content_views"><span class="toc-number">7.</span> <span class="toc-text">金 ~ 黄</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#content_views"><span class="toc-number">8.</span> <span class="toc-text">绿色</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#content_views"><span class="toc-number">9.</span> <span class="toc-text">蓝色</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#content_views"><span class="toc-number">10.</span> <span class="toc-text">黑 ~ 灰 ~ 白</span></a></li></ol>
                            </div>
                        </button>
                        
                  
                
                  <a href="#nexmoe-content" class="toc-link" aria-label="回到顶部" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
                
              </div>
            </div>
        </div>
    </div>
  </div>
  <div id="nexmoe-pendant">
    <div class="nexmoe-drawer mdui-drawer nexmoe-pd" id="drawer">
        
            <div class="nexmoe-pd-item">
                <div class="clock">
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="needle" id="hours"></div>
        <div class="needle" id="minutes"></div>
        <div class="needle" id="seconds"></div>
        <div class="clock_logo">

        </div>

    </div>
<style>
    .clock {
        background-color: #ffffff;
        width: 70vw;
        height: 70vw;
        max-width: 70vh;
        max-height: 70vh;
        border: solid 2.8vw #242424;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        box-sizing: border-box;
        box-shadow: 0 1.4vw 2.8vw rgba(0, 0, 0, 0.8);
        zoom:0.2
    }

    .memory {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .memory:nth-child(1) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(0deg) translateY(-520%);
    }

    .memory:nth-child(2) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(6deg) translateY(-1461%);
    }

    .memory:nth-child(3) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(12deg) translateY(-1461%);
    }

    .memory:nth-child(4) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(18deg) translateY(-1461%);
    }

    .memory:nth-child(5) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(24deg) translateY(-1461%);
    }

    .memory:nth-child(6) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(30deg) translateY(-520%);
    }

    .memory:nth-child(7) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(36deg) translateY(-1461%);
    }

    .memory:nth-child(8) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(42deg) translateY(-1461%);
    }

    .memory:nth-child(9) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(48deg) translateY(-1461%);
    }

    .memory:nth-child(10) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(54deg) translateY(-1461%);
    }

    .memory:nth-child(11) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(60deg) translateY(-520%);
    }

    .memory:nth-child(12) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(66deg) translateY(-1461%);
    }

    .memory:nth-child(13) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(72deg) translateY(-1461%);
    }

    .memory:nth-child(14) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(78deg) translateY(-1461%);
    }

    .memory:nth-child(15) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(84deg) translateY(-1461%);
    }

    .memory:nth-child(16) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(90deg) translateY(-520%);
    }

    .memory:nth-child(17) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(96deg) translateY(-1461%);
    }

    .memory:nth-child(18) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(102deg) translateY(-1461%);
    }

    .memory:nth-child(19) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(108deg) translateY(-1461%);
    }

    .memory:nth-child(20) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(114deg) translateY(-1461%);
    }

    .memory:nth-child(21) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(120deg) translateY(-520%);
    }

    .memory:nth-child(22) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(126deg) translateY(-1461%);
    }

    .memory:nth-child(23) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(132deg) translateY(-1461%);
    }

    .memory:nth-child(24) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(138deg) translateY(-1461%);
    }

    .memory:nth-child(25) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(144deg) translateY(-1461%);
    }

    .memory:nth-child(26) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(150deg) translateY(-520%);
    }

    .memory:nth-child(27) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(156deg) translateY(-1461%);
    }

    .memory:nth-child(28) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(162deg) translateY(-1461%);
    }

    .memory:nth-child(29) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(168deg) translateY(-1461%);
    }

    .memory:nth-child(30) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(174deg) translateY(-1461%);
    }

    .memory:nth-child(31) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(180deg) translateY(-520%);
    }

    .memory:nth-child(32) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(186deg) translateY(-1461%);
    }

    .memory:nth-child(33) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(192deg) translateY(-1461%);
    }

    .memory:nth-child(34) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(198deg) translateY(-1461%);
    }

    .memory:nth-child(35) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(204deg) translateY(-1461%);
    }

    .memory:nth-child(36) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(210deg) translateY(-520%);
    }

    .memory:nth-child(37) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(216deg) translateY(-1461%);
    }

    .memory:nth-child(38) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(222deg) translateY(-1461%);
    }

    .memory:nth-child(39) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(228deg) translateY(-1461%);
    }

    .memory:nth-child(40) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(234deg) translateY(-1461%);
    }

    .memory:nth-child(41) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(240deg) translateY(-520%);
    }

    .memory:nth-child(42) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(246deg) translateY(-1461%);
    }

    .memory:nth-child(43) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(252deg) translateY(-1461%);
    }

    .memory:nth-child(44) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(258deg) translateY(-1461%);
    }

    .memory:nth-child(45) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(264deg) translateY(-1461%);
    }

    .memory:nth-child(46) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(270deg) translateY(-520%);
    }

    .memory:nth-child(47) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(276deg) translateY(-1461%);
    }

    .memory:nth-child(48) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(282deg) translateY(-1461%);
    }

    .memory:nth-child(49) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(288deg) translateY(-1461%);
    }

    .memory:nth-child(50) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(294deg) translateY(-1461%);
    }

    .memory:nth-child(51) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(300deg) translateY(-520%);
    }

    .memory:nth-child(52) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(306deg) translateY(-1461%);
    }

    .memory:nth-child(53) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(312deg) translateY(-1461%);
    }

    .memory:nth-child(54) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(318deg) translateY(-1461%);
    }

    .memory:nth-child(55) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(324deg) translateY(-1461%);
    }

    .memory:nth-child(56) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(330deg) translateY(-520%);
    }

    .memory:nth-child(57) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(336deg) translateY(-1461%);
    }

    .memory:nth-child(58) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(342deg) translateY(-1461%);
    }

    .memory:nth-child(59) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(348deg) translateY(-1461%);
    }

    .memory:nth-child(60) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(354deg) translateY(-1461%);
    }

    .needle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .needle#hours {
        background-color: #1f1f1f;
        width: 4%;
        height: 30%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#hours.moving {
        transition: transform 150ms ease-out;
    }

    .needle#hours:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#minutes {
        background-color: #1f1f1f;
        width: 2%;
        height: 45%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#minutes.moving {
        transition: transform 150ms ease-out;
    }

    .needle#minutes:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#seconds {
        background-color: #cb2f2f;
        width: 1%;
        height: 50%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#seconds.moving {
        transition: transform 150ms ease-out;
    }

    .needle#seconds:after {
        content: '';
        background-color: #cb2f2f;
        width: 2.5vw;
        height: 2.5vw;
        max-width: 2.5vh;
        max-height: 2.5vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    .clock_logo{
        width: 10vw;
        height: 10vw;
        max-width: 10vh;
        max-height: 10vh;
        position: absolute;
        top: 50%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    @media (min-width: 100vh) {
        .clock {
            border: solid 2.8vh #242424;
            box-shadow: 0 1.4vh 2.8vh rgba(0, 0, 0, 0.8);
        }
    }

</style>





            </div>
        
            <div class="nexmoe-pd-item">
                <div class="qweather" >
    <div id="he-plugin-standard"></div>
    <div class="qweather-logo">

    </div>

</div>
<style>
    .qweather{
        position: relative;
    }
    .qweather-logo{
        position: absolute;
        right: 0;
        top: -15px;
        width: 40px;
        height: 40px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
</style>
<script>
  WIDGET = {
    "CONFIG": {
      "layout": "2",
      "width": "260",
      "height": "220",
      "background": "5",
      "dataColor": "0099FF",
      "borderRadius": "15",
      "key": "06114923535c446ea84c203a5e492a41"
    }
  }
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>

            </div>
        
</div>
<style>
    .nexmoe-pd {
        left: auto;
        top: 40px;
        right: 0;
    }
    .nexmoe-pd-item{
       display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
</style>

  </div>
  <script src="https://cdn.jsdelivr.net/combine/npm/lazysizes@5.1.0/lazysizes.min.js,gh/highlightjs/cdn-release@9.15.8/build/highlight.min.js,npm/mdui@0.4.3/dist/js/mdui.min.js?v=1"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>


<script src="/js/app.js?v=1695462045764"></script>

<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js"></script>
<script>
	$(".justified-gallery").justifiedGallery({
		rowHeight: 160,
		margins: 10,
	});
</script>

  





<!-- hexo injector body_end start -->
<script src="/js/clock.js"></script>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

<script src="/lib/codeBlock/codeBlockFuction.js"></script>

<script src="/lib/codeBlock/codeLang.js"></script>

<script src="/lib/codeBlock/codeCopy.js"></script>

<script src="/lib/codeBlock/codeShrink.js"></script>

<link rel="stylesheet" href="/lib/codeBlock/matery.css">

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<script src="/js/search.js"></script>

<script src="/js/webapp.js"></script>
<!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/assets/rem.model.json"},"display":{"position":"left","width":400,"height":400},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body>
</html>

<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/f90b2d50.js","daovoice")</script>
<script>
  daovoice('init', {
    app_id: "f90b2d50"
  });
  daovoice('update');
</script>

